import * as THREE from 'three'
import createApp from '../../core'

function createCameraHelper (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(-80, 120, 100)
  const lookAt = new THREE.Vector3()
  camera.lookAt(lookAt)

  const axesHelper = new THREE.AxesHelper(50)
  scene.add(axesHelper)

  const helper = new THREE.CameraHelper(camera)
  scene.add(helper)

  function refresh () {
    camera.lookAt(lookAt.set(data.x, data.y, data.z))
  }

  const folder = gui.addFolder('相机观察的位置')
  folder.add(data, 'x', -100, 100).onChange(refresh)
  folder.add(data, 'y', -100, 100).onChange(refresh)
  folder.add(data, 'z', -100, 100).onChange(refresh)
}

const data = {
  x: 0,
  y: 0,
  z: 0
}

export {
  createCameraHelper
}
